<template>
	<view :class="{'content':true,'contents':contentShows && contentShow}">
		<view class="mask-show">
			<view v-if="contentShow" class="mask-shows" @click="contentShow = false"></view>
			<!--banner-->
			<view class="banner" v-if="bannerList.length">
				<u-swiper bg-color="#fff" :list="bannerList" border-radius="0" img-mode="scaleToFill"
					indicator-pos="bottomLeft" height="160" :circular="false" @click="handleBannerClick"></u-swiper>
			</view>
			<!--adv popup 安全提示弹框-->
			<common-popup :show="advShow" :da="popupData" :img="advData.image" @close="handleAdvPopupCloseClick"
				@img-click="handleAdvPopupClick" />

			<view class="time-wrap">
				<view class="time-wrap-group">

					<!-- <view class="time-title">
					{{ type == 1 && is_check == 2 ? '请选择计费方式' : type == 1 && is_check == 1 ? '请选择充电金额' : type == 1 && is_check == 0 ? '请选择充电时长' : type == 2 ? '请选择充电时长' :'' }}
				</view>
				<view class="radio-groups">
					<u-radio-group v-if="type==1 && is_check == 2" v-model="tabCurrent" @change="tabChange">
						<u-radio class="colorChange" v-for="(item, index) in tabList" :key="index" :name="item.name"
							size="25rpx" active-color="#0da297">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view> -->
					<view class="top-tabs" v-if="type==1 && is_check == 2">
						<u-tabs bar-width="80" font-size="36" :list="tabList" :is-scroll="false" :current="tabCurrent"
							@change="tabChange" active-color="#0DA297" inactive-color="block"></u-tabs>
					</view>

				</view>


				<view class="time-list">
					<template v-if="type==1 && tabCurrent == '0' && (is_check == 0 ||is_check == 2)">
						<view :class="{'time-item':true,'current-time':currentTime==index,}"
							v-for="(item,index) in timeList" :key="index" @click="handleTimeClick(index)">
							<view class="" v-if="item.scanChange==1">
								<view class="time-text">
									<view class="item-time">充满即停</view>
								</view>

							</view>

							<view class="" v-else>
								<view class="time-text">

									<view class="item-time">{{item.time+'小时'}}</view>
									<view v-if="item.status==1" class="item-text">{{prizeText}}</view>
									<view v-if="item.status==2" class="item-text">{{couponText}}</view>
								</view>
								<image v-if="item.status==1" class="item-image" mode="widthFix" :src="prizeImg"></image>
								<image v-else-if="item.status==2" class="item-image" mode="widthFix" :src="couponImg">
								</image>
							</view>
							<view :class="index % 4 == 3 ? 'time-top-tip' :'time-top-tips'"
								v-if="item.scanChange ? currentTime==index && index !== 0 && chargeTip[index] : currentTime==index && chargeTip[index]">
								{{chargeTip[index]}}
							</view>

						</view>
					</template>
					<template v-if="type==1 && tabCurrent == '1' && (is_check == 1 ||is_check == 2)">
						<view :class="{'time-items':true,'currents-time':currentMoney==index}"
							v-for="(item,index) in moneyList" :key="index" @click="handleMoneyClick(index)">
							<view class="" v-if="item.scanChange==1">
								<view class="time-texts">
									<view class="item-time">充满即停</view>
								</view>
								<!-- <image class="item-images" mode="widthFix"
								:src="scan_img == 1 ? 'https://images.cd1a.cn/applet_img_bank/uni/charge/scan1.jpg' : 'https://images.cd1a.cn/applet_img_bank/uni/charge/scan2.png'">
							</image> -->
							</view>

							<view class="" v-else>
								<view class="time-texts">
									<view class="item-time">{{item.money+'元'}}</view>
									<view v-if="item.status==1" class="item-text">{{prizeTextMoney}}</view>
									<view v-if="item.status==2" class="item-text">{{couponTextMoney}}</view>
								</view>
								<!--prize 奖品-->
								<image v-if="item.status==1" class="item-image" mode="widthFix" :src="prizeImg"></image>
								<!--coupon 优惠券-->
								<image v-else-if="item.status==2" class="item-image" mode="widthFix" :src="couponImg">
								</image>
							</view>
							<view :class="index % 4 == 3 ? 'time-top-tip' :'time-top-tips'"
								v-if="item.scanChange ? currentMoney==index && index !== 0 && chargeTip[index] : currentMoney==index && chargeTip[index]">
								{{chargeTip[index]}}
							</view>

						</view>
					</template>
					<template v-else-if="type==2">

						<template v-if="cardList.length && !cardList[currentCardIndex].isContinue">
							<view v-if="(currentCardIndex!=null && item.time<=cardList[currentCardIndex].time)"
								:class="{'time-item':true,'current-time':currentTime==index}"
								v-for="(item,index) in timeList" :key="index" @click="handleTimeClick(index)">
								<view class="" v-if="item.scanChange==1">
									<view class="time-text">
										<view class="item-time">充满即停</view>
									</view>
									<!-- <image class="item-images" mode="widthFix"
									:src="scan_img == 1 ? 'https://images.cd1a.cn/applet_img_bank/uni/charge/scan1.jpg' : 'https://images.cd1a.cn/applet_img_bank/uni/charge/scan2.png'">
								</image> -->
								</view>
								<view class="time-text" v-else>
									<view class="item-time">{{item.time+'小时'}}</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view :class="{'time-item':true,'current-time':currentTime==index}"
								v-for="(item,index) in timeList" :key="index" @click="handleTimeClick(index)">
								<view class="" v-if="item.scanChange==1">
									<view class="time-text">
										<view class="item-time">充满即停</view>
									</view>
								</view>
								<view class="time-text" v-else>
									<view class="item-time">{{item.time+'小时'}}</view>
								</view>
							</view>
						</template>
					</template>
				</view>
			</view>
			<view class="red-tips" v-if="(topTips || moneytopTips) && (type==1) && send_stamps_type_money == 2">
				{{ tabCurrent == '0' ?   topTips : moneytopTips}}
			</view>
			<view class="gray-block"></view>
			<!-- 省钱卡 -->
			<view class="money-card" v-if="plus" @click="jumpMoneyCard">
				<image class="money-card-img1" mode="widthFix" :src="plus"></image>
			</view>
			<!-- 无忧充电 -->
			<view class="Worry" v-if="insuranceData.show">

				<view class="Worrys" @click="handleQuestionClick">
					<view class="Worry-left">
						<image class="insurance-image" mode="widthFix" :src="url1">
						</image>
						<text class="insurance-top-text1">{{insurancetextData.charging_wy}}</text>

					</view>
					<view class="Worry-right">
						<image class="insurance-image-02"  mode="widthFix" :src="url4">
						</image>
						<text class="insurance-top-text2">{{insurancetextData.original}}</text>
					</view>
				</view>
				<view class="Worry-center">
					<view class="time-zhishi" @click="knowledgeFn" v-if="knowledge_open">
						<image class="group-images" mode="widthFix" :src="url2">
						</image>
					</view>
					<image class="Worry-image" mode="widthFix" :src="url3">
						<view class="Worry-text">
							<view class="Worry-text1">
								{{insurancetextData.guarantee}}
								<text class="Worry-top-text1">{{insurancetextData.money_txt}} </text>
								<text class="Worry-top-text2">{{insurancetextData.secondary}}</text>
							</view>
							<view class="Worry-text2">
								{{insurancetextData.thistime}}
								<text class="Worry-top-text3">{{insurancetextData.money_yuan}}</text>
							</view>
						</view>
				</view>

			</view>
		</view>
		<view class="coupon-haves"></view>
		<!-- 公众号 -->
		<view class="public-slot-content" v-if="publicShow">
			<view v-if="publicTxt" class="public-txt">{{publicTxt}}</view>
			<official-account class="public"></official-account>
		</view>
		<view class="coupon-haves" v-if="contentShows && contentShow"></view>

		<view class="mask-show">
			<view v-if="contentShow" class="mask-showsTwo" @click="contentShow = false"></view>

			<view class="bar">
				<view class="common-bottom common-free" v-if="isFree==5 || isFree==7">
					<view class="font-wei">套餐状态</view>
					<view>
						{{freeTxt}}
					</view>
				</view>
				<view class="balance" v-if="type==1">
					<view class="balance-item-01 coupon-have" v-if="couponList.length && tabCurrent == '0'">
						<template v-if="currentTime===null">
							<view @click="handleCouponClick">
								<text class="font-wei">优惠券</text>
							</view>
							<view @click="handleCouponClick">
								<view class="picker-wrap">
									<text class="current-coupon"></text>
									<u-icon name="arrow-right" class="balance-icon" color="#0DA297" size="30"></u-icon>
								</view>
							</view>
						</template>

						<template v-else>
							<view>
								<text class="font-wei">优惠券</text><text class="balance-cancel"
									@click.stop="handleCouponCancel"
									v-if="currentCouponIndex && currentCouponIndex!=0">取消</text>
							</view>
							<view>
								<picker @change="handleCouponSelectConfirm" range-key="label"
									:value="currentCouponIndex" :range="couponList">
									<view class="picker-wrap">
										<text class="current-coupon">{{ couponList[currentCouponIndex].label }}</text>
										<u-icon name="arrow-right" class="balance-icon" color="#0DA297"
											size="30"></u-icon>
									</view>
								</picker>
							</view>
						</template>

					</view>
					<view class="balance-item-01 coupon-have" v-else-if="MoneyCouponList.length && tabCurrent == '1'">
						<template v-if="currentMoney===null">
							<view @click="handleCouponClick">
								<text class="font-wei">优惠券</text>
							</view>
							<view @click="handleCouponClick">
								<view class="picker-wrap">
									<text class="current-coupon"></text>
									<u-icon name="arrow-right" class="balance-icon" color="#0DA297" size="30"></u-icon>
								</view>
							</view>
						</template>

						<template v-else>
							<view>
								<text class="font-wei">优惠券</text><text class="balance-cancel"
									@click.stop="handleCouponCancel"
									v-if="currentCouponIndex && currentCouponIndex!=0">取消</text>
							</view>
							<view>
								<picker @change="handleCouponSelectConfirm" range-key="detail_money"
									:value="currentCouponIndex" :range="MoneyCouponList">
									<view class="picker-wrap">
										<text
											class="current-coupon">{{ MoneyCouponList[currentCouponIndex].detail_money}}</text>
										<u-icon name="arrow-right" class="balance-icon" color="#0DA297"
											size="30"></u-icon>
									</view>
								</picker>
							</view>
						</template>
					</view>
					<!-- <view class="balance-item-01 common-item" v-else>
					<view>
						<text class="font-wei">优惠券</text>
					</view>
					<view>
						<text class="current-coupon">暂无可用优惠券</text>
						<u-icon name="arrow-right" class="balance-icon" color="#0DA297" size="30"></u-icon>
					</view>
				</view> -->
					<view class="balance-item-02 common-item" v-if="discountPackageShow && (type==1)"
						@click="$u.throttle(handleJumpMember,$debounceTime,true)">
						<view>
							<text>购买优惠套餐</text>
						</view>
						<view>
							<text class="buy">购买</text>
						</view>
					</view>
				</view>
				<!--月卡card部分-->
				<view class="card" v-else-if="type==2">
					<!--无月卡去购买-->
					<template v-if="status==0">
						<view class="balance-item-01 common-item" @click="handleCardBuyClick">
							<view>
								<text class="font-wei">年/月卡状态</text>
							</view>
							<view>
								<text class="current-coupon">暂无可用卡，请购买(可点击)</text>
								<u-icon name="arrow-right" class="balance-icon" color="#0DA297" size="30"></u-icon>
							</view>
						</view>
					</template>
					<!--使用月卡-->
					<template v-else-if="status==1">
						<view class="balance-item-01 coupon-have">
							<view>
								<text class="font-wei">年/月卡状态</text>
							</view>
							<view>
								<picker @change="handleCardSelectConfirm" range-key="label" :value="currentCardIndex"
									:range="cardList">
									<view class="picker-wrap">
										<text class="current-coupon">{{cardList[currentCardIndex].label}}
										</text>
										<u-icon name="arrow-right" class="balance-icon" color="#0DA297"
											size="30"></u-icon>
									</view>
									<view class="current-coupon-new">
										{{cardList[currentCardIndex].descript}}
									</view>
								</picker>
							</view>
						</view>
					</template>
					<!--无月卡或者月卡都在使用中-->
					<template v-else-if="status==2">
						<view class="balance-item-01 common-item">
							<view>
								<text class="font-wei">年/月卡状态</text>
							</view>
							<view>
								<text class="current-coupon">所有月卡都在使用中或无可用卡</text>
								<u-icon name="arrow-right" class="balance-icon" color="#0DA297" size="30"></u-icon>
							</view>
						</view>
					</template>
				</view>

				<view class="common-bottom">
					<view class="font-wei">资费详情</view>
					<view>
						<view v-for="(item,index) in tariffDetailsList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<!--btn-->

			<view class="btn-wrap">
				<view class="btn-tips">
					{{ full_stop && (currentTime ==timeList.length || currentMoney ==moneyList.length) ?  bottomTipOne : ''}}
				</view>
				<view class="btn-tips-new" v-if="send_stamps_type_money == 2">
					{{ bottomTips}}
				</view>
				<view class="footer-button">
					<view class="" v-if="type==1">
						<view class="" v-if="fooLoading" style="display:flex;width: 750rpx;">
							<u-button v-if="insuranceData.show" :loading="loading" :custom-style="customstyle"
								@click="handleBalanceChargeClick(0)">
								{{ fooLoading ?  insurancetextData.ordinary : startText+'中...'  }}
							</u-button>
							<u-button v-if="insuranceData.show" :loading="loading" :custom-style="customstyles"
								style="flex: 1;" @click="handleBalanceChargeClick(1)">
								{{ fooLoading ?  insurancetextData.worryfree : startText+'中...'}}
							</u-button>
							<u-button v-else class="" :loading="loading" :custom-style="customstylen"
								@click="handleBalanceChargeClick(0)">
								{{insurancetextData.ordinary}}
							</u-button>
						</view>

						<view class="footer-loading" v-else>
							<u-loading mode="fooLoading" size="40"></u-loading>
							{{startText+'中...'}}
						</view>
					</view>
					<view class="" v-else-if="type==2">
						<view class="" v-if="fooLoading" style="display:flex;width: 750rpx;">
							<u-button v-if="insuranceData.show" :loading="loading" :custom-style="customstyle"
								@click="handleCardChargeClick(0)">
								{{ fooLoading ? insurancetextData.ordinary :  startText+'中...'   }}
							</u-button>
							<u-button v-if="insuranceData.show" :loading="loading" :custom-style="customstyles"
								style="flex: 1;" @click="handleCardChargeClick(1)">
								{{ fooLoading ?  insurancetextData.worryfree : startText+'中...'  }}
							</u-button>
							<u-button v-else :loading="loading" :custom-style="customstylen"
								@click="handleCardChargeClick(0)">
								{{insurancetextData.ordinary}}
							</u-button>

						</view>

						<view class="footer-loading" v-else>
							<u-loading mode="fooLoading" size="40"></u-loading>
							{{startText+'中...'}}
						</view>
					</view>
				</view>

				<!-- 	<view class="btn" v-if="type==1">
				<view class="btn-item" v-if="balanceBtnShow">
					<uv-btn :custom-style="customStyle" :loading="loading" @click="handleBalanceChargeClick"
						background="#0da297" loading-text="开启中..." :text="buttonText.balanceButtonText"></uv-btn>
				</view>
			</view>
			<view class="btn" v-else-if="type==2">
				<view class="btn-item" v-if="cardBtnShow">
					<uv-btn :custom-style="customStyle" :loading="loading" @click="handleCardChargeClick"
						background="#0da297" loading-text="开启中..." :text="buttonText.cardButtonText"></uv-btn>
				</view>
			</view> -->
				<view class="bottom-safe-area"></view>
			</view>

		</view>
		<!--stop when full modal-->
		<u-modal v-model="fullStopShow" @confirm="handleFullStopConfirm" show-cancel-button confirm-color="#0da297">
			<view class="slot-content">

				<text>{{fullStopModalText}}</text>
			</view>
		</u-modal>
		<!--抽奖-->
		<view v-show="prizeShow" class="prize-wrap">
			<view class="prize-top">
				<image mode="widthFix" :src="icon5"></image>
			</view>
			<view class="prize-center">
				<image class="prize-center-01" mode="widthFix" :src="icon4"></image>
				<image class="prize-center-04" mode="widthFix" :src="icon3"></image>
				<view class="prize-center-02-transition">
					<uni-transition ref="ani" show>
						<image class="prize-center-02" mode="widthFix" :src="icon2"></image>
					</uni-transition>
				</view>
				<image class="prize-center-03" mode="widthFix" @click.once="handleStartPrizeClick" :src="icon1"></image>
			</view>
			<view class="prize-bottom">
				<uv-btn color="#E2441E" :loading="prizeLoading" loading-text="抽奖中..." shape="circle"
					@click="handleClosePrizeClick" text="放弃参与" background="#FFB54C">
				</uv-btn>
			</view>
		</view>
		<common-drag />
		<!-- 关注公众号 -->
		<!-- <u-popup v-model="publicShow" mode="bottom" border-radius="14" :safe-area-inset-bottom="true"  :mask-close-able="false" height="300px"> -->

		<!-- <view class="public-button" @click="$u.throttle(handlePublicConfirm,2000)">
					已关注
		</view> -->
		<!-- </u-popup> -->
		<!-- 当前页面弹窗 -->
		<u-popup v-model="popupShow" mode="bottom" height="500px" closeable="true">
			<view class="content-pay">
				<!-- <view class="banner-pay" v-if="bannerList.length">
					<u-swiper bg-color="#fff" :list="bannerList" border-radius="0" img-mode="scaleToFill"
						indicator-pos="bottomLeft" height="160" :circular="false" @click="handleBannerClick"></u-swiper>
				</view> -->
				<template v-if="from ==5">
					<view class="forecast-title-pay" v-if="title">{{title }}</view>
				</template>
				<template v-else>
					<view class="arrears-pay" v-if="arrearsData.tt">
						<text>{{arrearsData.startText}}</text><text>{{arrearsData.tt}}</text><text>,{{arrearsData.endText}}</text>
					</view>
				</template>
				<view v-if="tips" class="tips-pay">
					{{tips}}
				</view>
				<view class="title-pay"><text>{{listTitle}}</text><text class="balance-pay"
						v-if="balance">{{balance}}</text></view>
				<view class="list-pay">

					<view
						:class="{item:true,itemNew:(index==0 && arrearsData.tt), active:currentIndex==index,redactive:(currentIndex==0 && index==0 && arrearsData.tt && from==5)}"
						@click="handleListClick(index)" v-for="(item,index) in list" :key="index">
						<view class="power-pay"><text>{{item.money/100}}</text><text>{{item.describe}}</text></view>
						<view
							:class="{moneyPay:true,moneyNew:(index ==0 &&  arrearsData.tt && currentIndex != 0),moneyNews:(index ==0 &&  arrearsData.tt && currentIndex == 0) }">
							{{item.yuan}}
						</view>
						<view class="rechargeable-pay" v-if="from==5 && item.tagShow">可充电</view>
					</view>
				</view>
				<view class="des-pay" v-if="des">
					<view class="des-title-pay">活动说明</view>
					<view class="des-content-pay">
						<rich-text :nodes="des"></rich-text>
					</view>
				</view>

				<guarantee />
				<view class="bottom-safe-area-pay"></view>
				<view class="btn-pay">
					<view>
						<uv-btn :loading="loading" @click="handlePayClick" text="去充值" loading-text="支付中..."></uv-btn>
					</view>
					<view class="bottom-safe-area-pay"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		subscribeUrl,
		commonParams
	} from '../../env.js';
	import privacyPopup from '@/components/privacyPopup/privacyPopup.vue';
	export default {
		components: {
			privacyPopup
		},
		data() {
			return {
				iconClose: this.$imgUrl + 'index/close.png',
				isAppleX: uni.getStorageSync('apple') || false,
				icon1: this.$imgUrl + 'charge/charge-04.png',
				icon2: this.$imgUrl + 'charge/charge-03.png',
				icon3: this.$imgUrl + 'charge/fireworks.png',
				icon4: this.$imgUrl + 'charge/charge-02.png',
				url1: this.$imgUrl + 'charge/dunpai.png',
				url3: this.$imgUrl + 'charge/Worry.png',
				url2: this.$imgUrl + 'charge/zhishi.png',
				url4: this.$imgUrl + 'charge/question.png',
				url5: this.$imgUrl + 'charge/honbao-card.png',
				//banner
				bannerList: [],
				currentBanner: null,
				//popup
				advData: {},
				advShow: false,
				popupData: {},
				//公众号
				is_focus_type: '', //1：强制 2：不强制
				hasPublic: false,
				publicShow: false,
				publicTxt: '',
				contentShow: false, //用来控制样式
				contentShows: false,
				//time
				prizeText: '',
				couponText: '',
				prizeImg: '',
				couponImg: '',
				timeList: [],
				currentTime: null,
				//money
				prizeTextMoney: '',
				couponTextMoney: '',
				//tips
				topTips: '',
				bottomTips: '',
				bottomTipOne: '',
				//tariff details
				tariffDetailsList: [],
				//common 
				type: 1, //余额 1，月卡
				port: '', //端口号
				deviceNo: '', //设备号
				isFree: '0', //0 扣费 ，5内测用户免费，7充电免费
				freeTxt: '',
				loading: false,
				subscribe: null, //订阅消息
				hasAudio: false,
				audioSrc: '',
				countdownId: '',
				buttonText: {
					fullStopText: '',
					balanceButtonText: '',
					cardButtonText: '',
				},
				/* customStyle: {
					height: '90rpx',
					lineHeight: '90rpx'
				}, */
				//balance 余额
				allCouponList: [],
				couponSelectShow: false,
				couponList: [],
				currentCouponIndex: null,
				discountPackageShow: false,
				balanceBtnShow: false,
				//充满即停
				fullStopShow: false,
				fullStopModalText: '',
				fullStopBtnShow: false,
				fullStopLoading: false,
				fullTime: "10",
				moneyTime: '',
				isfullPopup: true,
				//card
				cardList: [],
				currentCardIndex: null,
				cardSelectShow: false,
				remainingTime: '剩余充电时长200小时',
				status: null,
				cardId: "0",
				isCardClose: false,
				cardBtnShow: false,
				//location
				isScanCode: "0",
				location: {
					longitude: '',
					latitude: ''
				},
				//insurance
				insuranceChecked: true,
				insuranceData: {
					show: false,
					text: '',
				},
				insurancetextData: {
					charging_wy: '',
					original: '',
					guarantee: '',
					money_txt: '',
					secondary: '',
					thistime: '',
					money_yuan: '',
					ordinary: '',
					worryfree: '',
				},
				//抽奖
				prizeShow: false,
				transitionShow: true,
				prizeData: {
					num: 1,
					title: '谢谢参与',
				},
				prizeLoading: false,
				prizeId: "",
				scan_img: 2,
				chargeTip: '',
				popupShow: false, // 充值弹窗
				JumpChange: 0,
				/* 充值弹窗 */
				//天天币列表的标题文字
				listTitle: '',
				//banner
				bannerList: [],
				currentBanner: {},
				//从时间选择页面因为钱不够来的预估金额提示文字和最小充值金额
				minMoney: null,
				title: '',
				//欠费处的所有文字内容。
				arrearsData: {
					startText: '',
					endText: "",
					tt: "", //具体的欠费天天币字符串
					money: "",
					yuan: '',
				},
				// list
				list: [],
				currentIndex: null,
				loading: false,
				//describe
				des: '',
				//tips
				tips: '',
				//balance
				balance: '',
				from: '',
				full_stop: null,
				is_buy: '', // 充电无忧是否开启
				// Money
				tabList: [{
						name: '时间计费'
					},
					{
						name: '金额计费'
					},
				],
				plus: '', //省钱卡图片
				plus_url: '', //省钱卡跳转链接
				tabCurrent: '0',
				is_check: null, // 0金时间 1金额 2两个都显示
				moneyList: [],
				currentMoney: null,
				moneyTip: '',
				moneytopTips: '',
				MoneyCouponList: [],
				newMoneyCouponList: [],
				knowledge_open: false, // 1开启 2关闭
				knowledge_url: '',
				tariffDetailsListOld: '',
				tariffDetailsListNew: '',
				tariffDetailsListTimes: '',
				send_stamps_type_money: '', //1 不显示   2 显示
				fooLoading: true,
				startText: '',
				customstyle: {
					'width': '375rpx',
					'height': '110rpx',
					'background': '#F3FDF8',
					'font-size': ' 32rpx',
					'font-weight': '500',
					'line-height': '110rpx',
					'text-align': 'center',
					'color': '#11B696',
				},
				customstyles: {

					'height': '110rpx',
					'background': 'linear-gradient(90deg, #47C289 0%, #11B696 100%)',
					/* border-radius: 0rpx 44rpx 44rpx 0rpx; */
					'font-size': '32rpx',
					'font-weight': '500',
					'line-height': '110rpx',
					'text-align': 'center',
					'color': '#FFFFFF',
				},
				customstylen: {
					'width': '750rpx',
					'height': '110rpx',
					'background': 'linear-gradient(90deg, #47C289 0%, #11B696 100%)',
					/* 'border-top': '2px solid #47C289', */
					/* 'border-radius': '44rpx 0rpx 0rpx 44rpx', */
					'font-size': '32rpx',
					'font-weight': '500',
					'line-height': '110rpx',	
					'text-align': 'center',
					'color': ' #FFFFFF',
				},
				status: '1', //判断是否从省钱卡活动跳转过来
			}
		},
		onReady() {
			//动画
			this.$refs.ani.init({
				duration: 5000,
				timingFunction: 'ease',
				delay: 400
			});
		},
		onLoad(options) {
			if (options.is_scan_code) {
				this.isScanCode = options.is_scan_code;
			};

			if (options.status && options.status == 2) {
				this.status = options.status;
				let url = uni.getStorageSync('scanCodeUrl');
				this.getCodeUrl(url);
			} else {

				this.getBannerRequest();
				this._getBasicData();
			}


		},
		onShow() {

			// 从其他页面返回就行提示！
			if (this.JumpChange == 1) {
				this.$utils.toast('请点击开启充电按钮进行充电！');
				this.JumpChange = 0;
			}
			//获取过位置
			let privaShow = uni.getStorageSync('privaShow');
			if (this.isScanCode == '1' && privaShow != 3) {
				this._isAuthorize();
			};
			//刷新缓存
			if (uni.getStorageSync('isRefresh') == 1) {	
				if(this.status != 2 ){
					this._getBasicData();
				}
					
				if (this.type == 2) {
					if (this.cardList[0]) {

						if (this.cardList[0].operat == 1) {
							//判断是否开启充电自停
							if (Number(this.cardList[0].time) < Number(this.fullTime)) {
								this.timeList.splice(0, 1)
							}
							//如果后端返回的数组中第一项小于符合符合条件的最小时间，则将返回的数据钟第一项展示出来
							if (Number(this.cardList[0].time) < Number(this.timeList[0].time)) {
								this.timeList.unshift({
									status: 0,
									time: this.cardList[0].time
								});
							}
						}
					}
				}
			};
		},
		onHide() {
			//reset isRefresh cache
			uni.setStorageSync('isRefresh', 0);

			this.handleAdvPopupCloseClick();
		},
		onUnload() {

			uni.setStorageSync('isRefresh', 0);
			uni.removeStorageSync('mainStr');
			uni.removeStorageSync('coreData');
		},
		watch: {
			//监听是时间计费还是金额计费
			tabCurrent(newVal) {
				if (newVal == '0') {
					this.currentTime = null;
					this.scan_img = 2;
					this.tariffDetailsList = this.tariffDetailsListTimes[0].pro;
					//优惠券重置
					if (this.type == 1) {
						let conditionTime = this.timeList[0].time;
						this._getCouponList(conditionTime);
						if (this.couponList.length >= 2) {
							this.currentCouponIndex = 1;
						};
					}
				} else if (newVal == '1') {
					this.currentMoney = null;
					this.scan_img = 2;
					this.tariffDetailsList = this.tariffDetailsListOld[0].pro;

					if (this.type == 1) {
						if (this.moneyList[0].money) {
							let conditionTime = this.moneyList[0].money;
							this._getCouponList(conditionTime);
						} else {
							this._getCouponList(100);
						}


						if (newVal == this.moneyList.length - 1 && this.full_stop) {
							this.MoneyCouponList = this.couponList;
						} else {
							this.MoneyCouponList = this.newMoneyCouponList;
						}
						//优惠券
						if (this.MoneyCouponList.length >= 2) {
							this.currentCouponIndex = 1;
						};
					}
				}
			},
			//监听时间计费列表被选中的下标
			currentTime(newVal) {
				if (newVal !== null) {
					if (this.type == 1) {
						let conditionTime = this.timeList[newVal].time;
						this._getCouponList(conditionTime);
						//优惠券
						if (this.couponList.length >= 2) {
							this.currentCouponIndex = 1;
						};
					}
				}
			},
			//监听金额计费列表被选中的下标
			currentMoney(newVal) {
				if (newVal !== null) {
					if (this.type == 1) {
						if (this.moneyList[newVal].money) {
							let conditionTime = this.moneyList[newVal].money;
							this._getCouponList(conditionTime);
						} else {
							this._getCouponList(100);
						}


						/* if (newVal == this.moneyList.length - 1 && this.full_stop) {
							this.MoneyCouponList = this.couponList;
						} else {
							this.MoneyCouponList = this.newMoneyCouponList;
						} */
						//优惠券
						if (this.MoneyCouponList.length >= 2) {
							this.currentCouponIndex = 1;
						};
					}
				}
			},
			//监听是选择余额充电还是月卡充电
			type(newVal) {
				if (newVal == 2) {
					if (this.cardList[0]) {
						if (this.full_stop) {
							if (this.cardList[0].operat == 1) {
								if (Number(this.cardList[0].time) < Number(this.fullTime)) {
									this.timeList.splice(this.timeList.length - 1, 1);
								}
							}
						}
						if (this.cardList[0].operat == 1) {
							if (Number(this.cardList[0].time) < Number(this.timeList[0].time)) {
								this.timeList.unshift({
									status: 0,
									time: this.cardList[0].time
								});
							}
						}
					}

				}
			}
		},
		methods: {
			//省钱卡活动购买成功跳转
			getCodeUrl(str) {
				this.$u.api.portOpen({
					str,
				}).then(res => {
					//关闭开关
					if (res.result_code == '300') {
						uni.setStorageSync('coreData', res.data);
						this.getBannerRequest();
						this._getBasicData();
					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false,
							callback: (bool) => {

							}
						});



					};

				}).catch(() => {

				});
			},
			//banner and adv popup
			getBannerRequest() {
				this.$u.api.getActivity({
					scan: uni.getStorageSync('coreData').scan,
					uid: uni.getStorageSync('uid'),

				}).then(res => {
					if (res.result_code == '300') {
						//adv popup data 弹窗的数据
						if (res.data.show.length) {
							let adv = res.data.show[0];
							let advData = {
								image: adv.img,
								originalData: adv,
							};
							this.advData = advData;

						};

						if (res.data.show.length) {
							this.popupData = {
								txt: res.data.show[0].popup,
								from: 2,
								abc: res.data.show[0].index, //含义未知，后端要求
								time: res.data.show[0].times,
							};
						};

						//banner data
						let banner = Array.isArray(res.data.top_rebroadcast) ? res.data.top_rebroadcast : [];
						let bannerList = [];
						for (let k = 0; k < banner.length; k++) {
							let obj = {

								image: banner[k].img,
								originalData: banner[k],
							};
							//push
							bannerList.push(obj);
						};
						this.bannerList = bannerList;
						//选择余额或者月卡
						this._getType();
					} else {
						this.$utils.toast(res.msg);
					};
				});
			},
			handleBannerClick(index) {
				/* 用来判断页面跳转及返回 */
				this.JumpChange = 1;
				this.currentBanner = {
					originalData: this.bannerList[index].originalData,
					from: '3',

				};
				this.$u.debounce(this._bannerDebounce, this.$debounceTime, true);
			},
			//省钱卡跳转
			jumpMoneyCard() {
				let originalDatas = {
					type:'',
					is_enter:'',
					msg:'',
					car_shop_appid:'',
					url_platform:'',
					half_screen:'',
					is_self:'1',
					url:this.plus_url
				}
				this.currentBanner = {
					originalData:originalDatas
				}
				this.$u.debounce(this._bannerDebounce, this.$debounceTime, true);
			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			_bannerDebounce() {
				this.$utils.oldCommonJump(this.currentBanner);
			},
			handleAdvPopupClick() {
				this.$utils.oldCommonJump({
					...this.advData,
					from: '4'
				});
			},
			handleAdvPopupCloseClick() {
				this.advShow = false;
			},
			knowledgeFn() {
				this.$utils.jumpWebview(this.knowledge_url);
				/* uni.navigateTo({
					url: "/pages/webview/index?url=" + encodeURIComponent(JSON.stringify(this.knowledge_url))
				}) */
			},
			//关注公众号
			handlePublicConfirm(type) {
				//是否开启强制关注公众号 1:强制 2:不强制
				if (this.is_focus_type == 1) {
					this.$u.api.getAccount().then(res => {
						if (res.result_code == '200') {
							if (res.data.is_focus == 1) {
								this.publicShow = false
								if (type == 1) {
									this._handleBalanceChargeClick();
								} else if (type == 2) {
									this._handleCardChargeClick();
								}
							} else {
								this.contentShow = true;
								this.contentShows = true;
								this.$utils.toast(res.data.text);
							}
						} else {
							if (type == 1) {
								this._handleBalanceChargeClick();
							} else if (type == 2) {
								this._handleCardChargeClick();
							}
							this.publicShow = false
						};
					}).catch(() => {
						if (type == 1) {
							this._handleBalanceChargeClick();
						} else if (type == 2) {
							this._handleCardChargeClick();
						}
						this.publicShow = false
					});
				} else {
					if (type == 1) {
						this._handleBalanceChargeClick();
					} else if (type == 2) {
						this._handleCardChargeClick();
					}
					
				}
			},
			_getBasicData() {
				let coreData = uni.getStorageSync('coreData');
				//tips
				this.topTips = coreData.send_stamps ? coreData.send_stamps : '';
				this.moneytopTips = coreData.send_stamps_money ? coreData
					.send_stamps_money : '';
				this.bottomTips = coreData.warm_prompt;
				this.bottomTipOne = coreData.warm_stop;

				//按钮
				this.buttonText = {
					fullStopText: coreData.full_stop_name,
					balanceButtonText: coreData.general_charge_name,
					cardButtonText: coreData.month_charge_name,
				};

				//资费详情
				this.tariffDetailsListOld = coreData.is_money_list;
				this.tariffDetailsListNew = coreData.reminder;
				this.tariffDetailsListTimes = coreData.is_time_list;
				this.tariffDetailsList = Array.isArray(coreData.reminder) ? coreData.reminder : [];
				//购买优惠套餐
				this.discountPackageShow = coreData.month_card_scheme != 2 ? true : false;
				//充满即停
				this.fullStopBtnShow = coreData.full_stop == 2;
				//余额充电按钮
				this.balanceBtnShow = coreData.general_charge == 2;
				//月卡充电按钮
				this.cardBtnShow = coreData.month_charge == 2;
				//金额下方描述
				//省钱卡
				this.plus = coreData.plus;
				this.plus_url = coreData.plus_url;
				this.send_stamps_type_money = coreData.send_stamps_type_money;
				//充满即停
				this.fullTime = coreData.full_stop_time;
				this.moneyTime = coreData.full_stop_money;
				this.isfullPopup = coreData.full_stop_popout == 2;
				this.isCardClose = coreData.month_card_scheme == '0';
				//充电无忧
				this.insuranceData = {
					show: coreData.insure == '2',
					text: coreData.insure_tips,
					insuranceText: coreData.insure_protocol,
				};
				this.insurancetextData = {
						charging_wy: coreData.charging_wy,
						original: coreData.original,
						guarantee: coreData.guarantee,
						money_txt: coreData.money_txt,
						secondary: coreData.secondary,
						thistime: coreData.thistime,
						money_yuan: coreData.money_yuan,
						ordinary: coreData.ordinary,
						worryfree: coreData.worryfree,
					},
					this.insuranceChecked = coreData.insure_check == "2";
				//端口
				this.port = coreData.code;
				//设备号
				this.deviceNo = coreData.scan;
				//免费
				this.isFree = coreData.mf;
				this.freeTxt = coreData.mf_describe;
				//订阅
				this.subscribe = coreData.subscript_list;
				//语音
				if (coreData.yadi.open == '1') {
					this.hasAudio = true;
					this.audioSrc = coreData.yadi.voice;
				} else {
					this.hasAudio = false;
					this.audioSrc = '';
				};
				//is_check  0:时间  1：金额   2：混合模式
				// select_type   1 余额  2时间
				this.is_check = coreData.is_check;
				if (coreData.is_check == 0) {
					this.tabCurrent = '0';
					this.currentTime = null;
				} else if (coreData.is_check == 1) {
					this.tabCurrent = '1';
					this.currentMoney = null;
				} else if (coreData.is_check == 2) {
					if (coreData.select_type == 1) {
						this.tabCurrent = '1';
						this.currentMoney = null;
					} else if (coreData.select_type == 2) {
						this.tabCurrent = '0';
						this.currentTime = null;
					}
				}


				if (coreData.voice.open == '1') {
					this.$utils.playAudio(coreData.voice.voice);
				};
				//时间
				this.prizeText = coreData.tips;
				this.couponText = coreData.tips;
				this.prizeTextMoney = coreData.tips_money;
				this.couponTextMoney = coreData.tips_money;
				this.prizeImg = coreData.send_stamps_img;
				this.couponImg = 'https://api.cd1a.cn/imges/cdsq.png';
				// 充电小知识
				this.knowledge_open = coreData.knowledge_open == 1;
				this.knowledge_url = coreData.knowledge_url;

				//获取余额充电列表
				let arr = coreData.is_time_list;
				let len = arr.length;
				let timeList = [];
				this.full_stop = coreData.full_stop == 2;
				for (let i = 0; i <= len; i++) {
					let json = {};
					if (coreData.full_stop == 2 && i == len) {
						timeList.push({
							scanChange: 1,
							time: coreData.full_stop_time,
						});
						let chargeTip = coreData.charge;
						// tip
						this.chargeTip = chargeTip.unshift('');
					} else {
						this.chargeTip = coreData.charge;
					}
					if (i < len) {
						json.time = parseInt(arr[i].times);
						let bool = (coreData.mf != 5) && (coreData.mf != 7) && (coreData.month_card_scheme != 2) && (json
							.time >= parseInt(coreData.discount_coupon_time));
						if ((coreData.send_time_type == 2) && bool) {
							json.status = 1;
						} else if ((coreData.send_time_type == 1) && bool) {
							json.status = 2;
						} else {
							json.status = 0;
						};
						timeList.push(json);
					}


				};
				this.timeList = timeList;
				// money //获取金额充电列表
				let arr1 = coreData.is_money_list;
				let len1 = arr1.length;
				let moneyList = [];
				this.full_stop = coreData.full_stop == 2;
				for (let i = 0; i <= len1; i++) {
					let json = {};
					if (coreData.full_stop == 2 && i == len1) {
						moneyList.push({
							scanChange: 1,
							time: coreData.full_stop_time,
						});
					}
					if (i < len1) {
						json.money = Number(arr1[i].times / 100);
						let bool = false;
						if (Number(coreData.discount_coupon_money / 100) == 0) {
							bool = false;
						} else {
							bool = (coreData.mf != 5) && (coreData.mf != 7) && (coreData.month_card_scheme != 2) && (json
								.money >= Number(coreData.discount_coupon_money / 100));
						}



						if ((coreData.send_money_type == 2) && bool) {
							json.status = 1;
						} else if ((coreData.send_money_type == 1) && bool) {
							json.status = 2;
						} else {
							json.status = 0;
						};
						moneyList.push(json);
					}

				};
				this.moneyList = moneyList;
				//重置选中
				this._resetInitialData();
				//coupon
				this._getCouponList(0);
				//card
				this._getCard();
			},
			// 充电时长点击
			handleTimeClick(index) {
				if (this.type == 1) {
					//是否开启充满自停
					if (index == this.timeList.length - 1 && this.full_stop) {
						this.scan_img = 1;
					} else {
						this.scan_img = 2;
					}
					//选中下标为0的时候
					if (index == this.timeList.length - 1) {
						if (this.full_stop) {
							this.tariffDetailsList = this.tariffDetailsListNew;
						} else {
							this.tariffDetailsList = this.tariffDetailsListTimes[index].pro;

						}
					} else {
						this.tariffDetailsList = this.tariffDetailsListTimes[index].pro;
					}

				}
				this.currentTime = index;
			},
			// 充电金额点击
			handleMoneyClick(index) {
				if (this.type == 1) {
					//是否开启充满自停
					if (index == this.moneyList.length - 1 && this.full_stop) {
						this.scan_img = 1;
					} else {
						this.scan_img = 2;
					}
					//选中下标为0的时候
					if (index == this.moneyList.length - 1) {
						if (this.full_stop) {
							this.tariffDetailsList = this.tariffDetailsListNew;
						} else {
							this.tariffDetailsList = this.tariffDetailsListOld[index].pro;

						}
					} else {

						this.tariffDetailsList = this.tariffDetailsListOld[index].pro;

					}
				}
				this.currentMoney = index;
			},
			//选择余额还是月卡
			_getType() {

				let coreData = uni.getStorageSync('coreData');

				if ((coreData.month_card_scheme != 2) && (coreData.month_charge == 2)) {
					//公众号组件
					// #ifdef	MP-WEIXIN
					this.hasPublic = (coreData.is_focus == '2') && uni.getStorageSync('officialAccount');
					this.is_focus_type = coreData.is_focus_type;
					this.publicTxt = coreData.tips_name;
					// #endif

					this.$utils.modal({
						title: '请选择充电类型',
						content: '',
						confirmText: '月卡',
						cancelText: '余额',
						confirmColor: '#333',
						cancelColor: '#333',
						callback: (bool) => {
							if (bool) {
								this.type = 2;
								uni.setNavigationBarTitle({
									title: '请选择充电时长'
								});
								this.tabCurrent = '0';
							} else {
								this.type = 1;
								uni.setNavigationBarTitle({
									title: this.is_check == 2 ? '请选择计费方式' : this.is_check == 1 ?
										'请选择充电金额' : this.is_check == 0 ? '请选择充电时长' : ''
								});
							};
							//广告
							if (this.advData.image) {
								this.advShow = true;
							};
							// #ifdef	MP-WEIXIN
							//公众号	
							if (this.hasPublic) {
								this.publicShow = true;
							} else {
								this.contentShows = false;
							}
							// #endif

						}
					});
				} else {
					//月卡模式  0不使用，1使用，2强制使用	
					if (coreData.month_card_scheme == 2) {
						//Use monthly card directly
						this.type = 2;
						/* this.tabCurrent = '0'; */
					} else {
						//Use the balance directly
						this.type = 1;
					};

					if (this.advData.image) {

						this.advShow = true;
					};
					// #ifdef	MP-WEIXIN
					//公众号	
					if (this.hasPublic) {
						this.publicShow = true;
					}
					// #endif
				};

			},
			//balance 优惠券
			_getCouponList(time) {
				let coreData = uni.getStorageSync('coreData');
				let arr = coreData.ticket_list;
				let len = arr.length;
				if(time &&  time == 100){
				 if (len) {
				 	let allCouponList = [];
				 	for (let i = 0; i < len; i++) {
				 		let json = {};
				 		json.value = arr[i].ucid;
				 		json.card_type = arr[i].card_type;
				 		json.detail_money = arr[i].detail;
				 		json.label = arr[i].detail;
				 		json.money_time = (arr[i].money_time) / 100;
				 		json.conditionTime = arr[i].full_time;
				 		json.reserve_3 = arr[i].reserve_3;
				 		allCouponList.push(json);
				 	};
				 	this.allCouponList = allCouponList;
				 	this._filterCoupon(time);
				 	//this._filterCoupon(this.allCouponList[0].full_time);
				 } else {
				 	this.currentCouponIndex = null; //reset
				 	this.couponList = []; //reset
				 	this.MoneyCouponList = [];
				 };	
				}else{
					if (len) {
						let allCouponList = [];
						for (let i = 0; i < len; i++) {
							let json = {};
							json.value = arr[i].ucid;
							json.card_type = arr[i].card_type;
							json.detail_money = arr[i].detail_money;
							json.label = arr[i].detail;
							json.money_time = (arr[i].money_time) / 100;
							json.conditionTime = arr[i].full_time;
							json.reserve_3 = arr[i].reserve_3;
							allCouponList.push(json);
						};
						this.allCouponList = allCouponList;
						this._filterCoupon(time);
						//this._filterCoupon(this.allCouponList[0].full_time);
					} else {
						this.currentCouponIndex = null; //reset
						this.couponList = []; //reset
						this.MoneyCouponList = [];
					};
				}
				

				
			},
			//优惠卷排序
			_filterCoupon(conditionTime) {
				console.log(this.allCouponList,'this.allCouponList');
				let allCouponList = this.allCouponList;
				if (allCouponList.length) {
					let arr = null;
					if (this.tabCurrent == 0) {
						arr = allCouponList.filter((item, index) => {
							if (item.reserve_3 == 0 || item.reserve_3 == 1) {
								return parseInt(item.conditionTime) <= conditionTime;
							}
						});
					} else if (this.tabCurrent == 1) {
						arr = allCouponList.filter((item, index) => {
							if (item.reserve_3 == 0 || item.reserve_3 == 2) {
								return (parseInt(item.money_time) <= conditionTime || parseInt(item
									.money_time) == 0)
							}
						});
						
					}

					//排序
					if (arr.length >= 2) {
						let one = arr[0];
						arr.shift();
						arr.sort(function(a, b) {
							return parseInt(b.conditionTime) - parseInt(a.conditionTime);
						});
						let couponList = [one, ...arr];
						this.couponList = couponList;
						// 添加金额优惠券
						let moneyList = [];
						for (var i = 0; i < arr.length; i++) {

							moneyList.push(arr[i]);

						}
						this.MoneyCouponList = [one, ...moneyList];
						this.newMoneyCouponList = this.MoneyCouponList;
					} else {
						this.couponList = [];
						this.MoneyCouponList = [];
						this.newMoneyCouponList = [];
					};


				}
			},
			handleJumpMember() {
				uni.navigateTo({
					url: '/pages/member/combo?from=2'
				});
			},
			//选择优惠券
			handleCouponSelectConfirm(e) {

				let index = parseInt(e.detail.value);
				this.currentCouponIndex = index;
			},
			handleCouponCancel() {
				if (this.couponList.length >= 2 || this.MoneyCouponList >= 2) {
					this.currentCouponIndex = 0;
				};
			},
			handleCouponClick() {
				if (this.tabCurrent == '0') {
					if (this.currentTime == null) {
						this.$utils.toast('请先选择充电时长');
						return;
					};
				} else if (this.tabCurrent == '1') {
					if (this.currentMoney == null) {
						this.$utils.toast('请先选择充电金额');
						return;
					};
				}

			},
			handleFullStopClick() {
				this.fooLoading = false;
				if (this.type == 2 && this.isCardClose && this.status == 1 && this.cardList[this.currentCardIndex].time <
					parseFloat(this.fullTime)) {
					this.$utils.toast('您的月卡时长不足，暂无法使用充满即停');
					this.fooLoading = true;
					return false;
				};
				if (this.isfullPopup) {
					
					this.$u.api.getFullStopModal({
						is_buy: this.is_buy
					}).then(res => {
						if (res.result_code == '300') {
							this.fullStopModalText = res.data.agreement;
							this.fullStopShow = true;
							
						} else {
							this.$utils.toast(res.msg);
						};
						this.fooLoading = true;

					}).catch(() => {
						this.fooLoading = true;

					});
				} else {
					this.handleFullStopConfirm();
				};

			},
			handleFullStopConfirm() {
				//common data
				var data = {
					is_buy: this.is_buy,
					code: this.port,
					scan: this.deviceNo,
					time: this.fullTime,
					province_id: '',
					free: this.isFree,
					type: '2', //充电类型:1普通充电,2充满即停（不传即默认 1）	
					...this.location,
				};

				if (this.type == 1) {
					if (this.tabCurrent == '0') {
						//余额
						data.ticket_id = (this.isFree <= 0 && this.currentCouponIndex != null) ? this.couponList[this
							.currentCouponIndex].value : '0'; //特殊
						data.card_id = '0';
					} else if (this.tabCurrent == '1') {
						// 金额
						
						data.ticket_id = (this.isFree <= 0 && this.currentCouponIndex != null) ? this.MoneyCouponList[this
							.currentCouponIndex].value : '0'; //特殊
						data.card_id = '0';
					}

					this.commonStartRequest(data, true);

				} else if (this.type == 2) {

					//月卡
					//verify月卡
					if (this.status == 0) {
						//去充月卡
						this.$utils.modal({
							title: '提示',
							content: '您暂无可用月卡，可点击确定购买！',
							callback: (bool) => {
								if (bool) {
									this.handleCardBuyClick();
								}
							}
						});
					} else if (this.status == 2) {
						this.$utils.toast('所有月卡都在使用中或无可用卡');
					} else if (this.status == 1) {
						data.ticket_id = '0';
						data.is_buy = this.is_buy;
						data.card_id = this.isFree <= 0 ? this.cardList[this.currentCardIndex].id : '0';
						this.commonStartRequest(data, true);
					};

				};

			},
			handleBalanceChargeClick(status) {
				/* 		this.$u.throttle(() => { */
				this.is_buy = status;
				if (status == 0) {
					this.startText = this.insurancetextData.ordinary;
				} else if (status == 1) {
					this.startText = this.insurancetextData.worryfree;
				}
				if (this.hasPublic) {
					this.handlePublicConfirm(1);
				} else {
					this._handleBalanceChargeClick();
				}

				/* }, 2000); */



			},
			_handleBalanceChargeClick() {
				if (this.tabCurrent == '0') {
					if (this.scan_img == 1) {
						this.handleFullStopClick();
					} else {
						if (this.currentTime == null) {
							this.$utils.toast('请先选择充电时长');
							this.fooLoading = true;
							return;
						};
						let data = {

							code: this.port,
							scan: this.deviceNo,
							time: this.tabCurrent == '1' ? '0' : this.timeList[this.currentTime].time + '',
							province_id: '0',
							ticket_id: (this.isFree <= 0 && this.currentCouponIndex != null) ? this.couponList[this
								.currentCouponIndex].value : '0',
							card_id: '0',
							free: this.isFree,
							is_buy: this.is_buy,
							...this.location,
						};
						this.commonStartRequest(data);
					}
				} else if (this.tabCurrent == '1') {
					if (this.scan_img == 1) {
						this.handleFullStopClick();
					} else {
						if (this.currentMoney == null) {
							this.$utils.toast('请先选择充电金额');
							return;
						};
						let data = {
							code: this.port,
							scan: this.deviceNo,
							time: '0',
							province_id: this.tabCurrent == '0' ? '0' : parseInt(this.moneyList[this.currentMoney]
								.money * 100) + '',
							ticket_id: (this.isFree <= 0 && this.currentCouponIndex != null) ? this.MoneyCouponList[
								this.currentCouponIndex].value : '0',
							card_id: '0',
							free: this.isFree,
							is_buy: this.is_buy,
							...this.location,
						};
						this.commonStartRequest(data);
					}

				}

			},
			//card
			_getCard() {
				let coreData = uni.getStorageSync('coreData');
				let status = null;
				if (coreData.card_list.length) {

					let arr = coreData.card_list;
					let cardList = [];
					let len = arr.length;
					for (let i = 0; i < len; i++) {
						let json = {};
						json.label = arr[i].cal_name;
						json.descript = arr[i].descript;
						json.id = arr[i].card_id;
						json.time = arr[i].rest_time;
						json.operat = arr[i].operat;
						json.isContinue = arr[i].operat == 2 ? true : false;
						cardList.push(json);
					};
					this.cardList = cardList;
					this.currentCardIndex = 0; //default index
					this.status = 1;
				} else {
					this.cardList = []; //reset list
					this.currentCardIndex = null; //reset index

					if (coreData.in_use == 2) {
						this.status = 2;
					} else {

						this.status = 0;
					};
				};
			},
			//购买月卡
			handleCardBuyClick(id = '0', state = '1') {

				uni.navigateTo({
					url: `/pages/pay/monthly-card?id=${id}&state=${state}&from=1`
				});
				this.fooLoading = true;
			},
			//月卡选中值发生变化进行重新赋值 currentCardIndex月卡列表选中的下标
			handleCardSelectConfirm(e) {

				let index = parseInt(e.detail.value);

				if (index != this.currentCardIndex) {

					this.currentCardIndex = index;

					if (!this.cardList[this.currentCardIndex].isContinue) {
						this.currentTime = null;
					};
				};

			},
			handleCardChargeClick(stutus) {
				/* 	this.$u.throttle(() => { */
				this.is_buy = stutus;
				if (stutus == 0) {
					this.startText = this.insurancetextData.ordinary;
				} else if (stutus == 1) {
					this.startText = this.insurancetextData.worryfree;
				}
				if (this.hasPublic) {
					this.handlePublicConfirm(2);
				} else {
					this._handleCardChargeClick();
				}

				/* }, 2000); */

			},
			//月卡
			_handleCardChargeClick() {
				if (this.currentTime == null) {
					this.$utils.toast('请先选择充电时长');
				} else if (this.status == 0) {
					//去充月卡
					this.$utils.modal({
						title: '提示',
						content: '您暂无可用月卡，可点击确定购买！',
						callback: (bool) => {
							if (bool) {
								this.handleCardBuyClick();
							}
						}
					});
				} else if (this.status == 2) {
					this.$utils.toast('所有月卡都在使用中或无可用卡');
				} else if (this.status == 1) {

					if (this.cardList[this.currentCardIndex].isContinue && this.timeList[this.currentTime].time > this
						.cardList[this.currentCardIndex].time) {
						if (this.isCardClose) {
							this.$utils.toast('超出时长，请您重新选择');
						} else {

							this.$utils.modal({
								title: '提示',
								content: '月卡时长不足，请续卡或重新选择时间！',
								cancelText: '重新选择',
								confirmText: '去续卡',
								callback: (bool) => {
									if (bool) {
										this.handleCardBuyClick(this.cardList[this.currentCardIndex].id,
											"2");

									};
								}
							});
						};

					} else {
						
						//充满自停
						if ((this.cardList[0].operat == 1 && Number(this.cardList[0].time) >= Number(this.fullTime) && this
								.full_stop) || (this.full_stop && this.cardList[0].operat == 2) || (this.full_stop && this
								.cardList[0].operat == 3)) {
							if (this.currentTime == this.timeList.length - 1) {
								this.handleFullStopClick();
							} else {
								let data = {
									is_buy: this.is_buy,
									code: this.port,
									scan: this.deviceNo,
									time: this.timeList[this.currentTime].time + '',
									ticket_id: '0',
									card_id: this.isFree <= 0 ? this.cardList[this.currentCardIndex].id : '0',
									free: this.isFree,
									...this.location,
								};
								this.commonStartRequest(data);
							}

						} else {
							let data = {
								is_buy: this.is_buy,
								code: this.port,
								scan: this.deviceNo,
								time: this.timeList[this.currentTime].time + '',
								ticket_id: '0',
								card_id: this.isFree <= 0 ? this.cardList[this.currentCardIndex].id : '0',
								free: this.isFree,
								...this.location,
							};

							this.commonStartRequest(data);
						}
					};
				}

			},
			//common
			commonStartRequest(data, isFullStop = false) {
				this.fooLoading = false;
				if (isFullStop) {
					this.fullStopLoading = true;
				} else {
					this.loading = true;
				};
				this.$u.api.startCharge(data).then(res => {
					if (isFullStop) {
						this.fullStopLoading = false;
					} else {
						this.loading = false;
					};
					if (res.result_code == '334') {
						//续卡
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							callback: (bool) => {
								if (bool) {
									this.handleCardBuyClick(this.cardList[this.currentCardIndex].id,
										"2");
								};
							}
						});
						this.fooLoading = true;

					} else if (res.result_code == '333' || res.result_code == '336') {
						//功率超额
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							confirmText: '升级月卡',
							callback: (bool) => {
								if (bool) {
									this.handleCardBuyClick(this.cardList[this.currentCardIndex].id,
										"3");

								};
							}
						});
						this.fooLoading = true;

					} else if (res.result_code == '324' || res.result_code == '335') {
						//余额不足
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							callback: (bool) => {
								if (bool) {
									this.popupShow = true;
									this.from = 5;
									this.minMoney = res.data.min_pay;
									this.title = res.data.pay_tips;
									this.getDataRequest();
									/* uni.navigateTo({
										url: `/pages/pay/recharge?from=5&money=${res.data.min_pay}&title=${res.data.pay_tips}`
									}); */
								};
							}
						});
						this.fooLoading = true;

					} else if (res.result_code == '338') {

						//语音
						if (this.hasAudio) {
							this.$utils.playAudio(this.audioSrc);
						};

						this.countdownId = res.data.user_log_id;
						// #ifdef	MP-WEIXIN
						//订阅
						uni.requestSubscribeMessage({
							tmplIds: this.subscribe,
							success: ret => {

								if (ret[this.subscribe[0]] == 'accept') {

									uni.request({
										url: subscribeUrl,
										data: {
											userid_locked: uni.getStorageSync('userId'),
											...commonParams,
										},
									});

									//抽奖
									this._isLuckyDraw(res);

								} else {
									this._isLuckyDraw(res);
								};
								this.fooLoading = true;

							},
							fail: () => {
								this._isLuckyDraw(res);
								this.fooLoading = true;

							}
						});

						// #endif

						// #ifdef	MP-ALIPAY
						this._isLuckyDraw(res);

						// #endif

					} else {
						this.$utils.toast(res.msg);
						this.fooLoading = true;

					};
				}).catch(() => {
					if (isFullStop) {
						this.fullStopLoading = false;
					} else {
						this.loading = false;
					};
					this.fooLoading = true;
				});
			},
			//抽奖
			_isLuckyDraw(drawData) {

				if (drawData.data.is_corona == '2') {

					this.prizeShow = true;
					let title = drawData.data.corona[0].gift_name;
					let num = drawData.data.corona[0].gift_id == 1 ? 8 : (drawData.data.corona[0].gift_id - 1);
					this.prizeData = {
						num,
						title,
					};

					this.prizeId = drawData.data.corona[0].gift_id;
				} else {

					this._afterSuccessfully();
				};
			},
			_resetInitialData() {
				//判断充满即停存不存在

				this.scan_img = 2;
				this.currentCouponIndex = null;
			},
			_jumpCharging() {
				//跳转倒计时
				uni.reLaunch({
					url: `/pages/charge/charging?id=${this.countdownId}&status=2`
				});
			},
			//position
			_isAuthorize() {

				//支付宝区分
				// #ifdef	MP-ALIPAY
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
					}
				});
				// #endif


				// #ifdef	MP-WEIXIN
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that._getLocation();
					},
					fail() {
						that._openAuthorizeModal();
					}
				});
				// #endif
			},
			_getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
					}
				});
			},
			_openAuthorizeModal() {
				this.$utils.modal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					callback: (bool) => {
						if (bool) {
							uni.openSetting();
						} else {
							this.$utils.toast('您拒绝了授权，无法获得您的位置');
						}
					}
				});
			},
			//insurance
			handleQuestionClick() {
				uni.setStorageSync('insuranceText', this.insuranceData.insuranceText);
				uni.navigateTo({
					url: `/pages/charge/insurance`
				});
			},
			//After the charging call is turned on successfully 充电成功开启后
			_afterSuccessfully() {
				this._jumpCharging();
			},
			//抽奖放弃参与
			handleClosePrizeClick() {
				this.prizeShow = false;
				this._afterSuccessfully();
			},
			handleStartPrizeClick() {
				this.prizeLoading = true;
				this._controlLottery();
			},
			//抽奖开始
			_controlLottery() {
				let rotate = 2880 - (this.prizeData.num * 45) + '';
				this.$refs.ani.step({
					rotate
				});
				this.$refs.ani.run(() => {
					this.prizeLoading = false;
					//Reminder lottery information
					this.$u.api.prizeDistribution({

						log_id: this.countdownId,
						gift_id: this.prizeId,
					}).then(res => {
						if (res.result_code == '300') {
							this.$utils.modal({
								title: '温馨提示',
								content: this.prizeData.title,
								showCancel: false,
								callback: () => {
									//Close popup
									this.handleClosePrizeClick();
								}
							});
						};
					}).catch(err => {})

				})
			},
			/* 充值弹窗 */
			getDataRequest() {
				this.$u.api.getRechargeData().then(res => {
					if (res.result_code == 300) {
						//天天币列表的标题文字
						this.listTitle = res.data.text_return.info;
						//banner
						let arr = res.data.active;
						let len = arr.length;
						let bannerList = [];
						for (let i = 0; i < len; i++) {
							let json = {

								image: arr[i].img,
								//接口的原始数据，
								originalData: arr[i],
							};
							bannerList.push(json);
						};
						this.bannerList = bannerList;
						//tips
						this.tips = res.data.tips;
						//balance
						this.balance = res.data.balance;
						//list
						let list = res.data.money_list;
						//arrears

						if (list[0].type == "1") {
							this.arrearsData = {
								startText: res.data.debt_money.begin,
								endText: res.data.debt_money.end,
								tt: res.data.debt_money.describe,
								money: list[0].money,
								yuan: list[0].yuan,
							};
							/* this.from = 4; */
							this.currentIndex = 0;
						};

						if (this.from == 5) {
							//当用户从时间选择页面来因为钱不够充值时，根据后端预估的最小金额，把列表中所有大于最小金额
							//的都打上可充电标记tagShow
							list.forEach(val => {
								val.tagShow = parseInt(val.money) >= parseInt(this.minMoney) ? true :
									false;
							});
						};

						this.list = list;
						//descript
						// #ifdef	MP-WEIXIN
						if (res.data.descript) {
							this.des = res.data.descript.replace(/(^\s+)|(\s+$)|\s+/g, '<br />');
						};

						// #endif
						//*支付宝
						// #ifdef	MP-ALIPAY
						if (res.data.descript) {
							this.des = this.$parseHtml(res.data.descript.replace(/(^\s+)|(\s+$)|\s+/g, '<br />'));
						};
						// #endif

					} else {

						this.$utils.toast(res.msg);
					};
				}).catch(() => {});
			},
			//banner
			/* handleBannerClick(index) {
				this.currentBanner = {
					originalData: this.bannerList[index].originalData,
					from: '9',
				};
				this.$utils.oldCommonJump(this.currentBanner);
			}, */
			//list
			handleListClick(index) {
				this.currentIndex = index;
			},
			handlePayClick() {
				if (this.currentIndex == null) {
					this.$utils.toast('请选择');
				} else {
					this.paymentRequest();
				};
			},
			paymentRequest() {
				this.loading = true;
				let money = this.list[this.currentIndex].money;
				uni.login({
					provider: 'weixin',
					success: ret => {
						//create order
						this.$u.api.commonPay({

							code: ret.code,
							member: 1,
							fee: money,
						}).then(res => {

							if (res.result_code == '314') {
								let resOrderId = res.data.order_id;
								let tradeNO = res.data.trade_no; //支付宝支付需要的tradeNO
								if (resOrderId) {

									uni.requestPayment({ //支付api
										//微信
										// #ifdef	MP-WEIXIN
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: 'MD5',
										paySign: res.data.paySign,
										// #endif
										//支付宝
										// #ifdef	MP-ALIPAY
										provider: 'alipay',
										orderInfo: tradeNO,
										// #endif

										success: (resultData) => {


											// #ifdef	MP-ALIPAY
											if (resultData?.resultCode == 6001 ||
												resultData?.resultCode == 6002) {
												//Payment failed
												this.$utils.modal({
													title: '提示',
													content: '支付失败',
													showCancel: false,
													callback: (bool) => {
														this.loading = false;
													}
												});
												return false;
											};
											// #endif	

											//Check if payment is successful 支付成功
											this.$u.api.checkPaymentSuccess({
												order_id: resOrderId,

											}).then((retu) => {
												if (retu.result_code == '300') {

													//payment successful
													let from = this.from;
													if (from == '5') {

														//刷新
														this.$u.api.portOpen({
															str: uni
																.getStorageSync(
																	'mainStr'
																),

														}).then(result => {
															if (result
																.result_code ==
																'300') {
																this.loading =
																	false;
																//运维电话
																this.$u
																	.vuex(
																		'maintain_phone',
																		result
																		.data
																		.operator_phone
																	);
																//更新
																uni.setStorage({
																	key: 'coreData',
																	data: result
																		.data,
																	success: () => {

																		uni.setStorageSync(
																			'isRefresh',
																			0
																		);
																		this.popupShow =
																			false;
																		this.$utils
																			.toast(
																				'充值成功，请点击开启充电按钮进行充电！'
																			);
																		/* this.$utils
																			.back(); */

																	}
																});
															} else {
																this.$utils
																	.modal({
																		title: '提示',
																		content: result
																			.msg,
																		showCancel: false,
																		callback: (
																			bool
																		) => {
																			this.loading =
																				false;
																		}
																	});
															};
														}).catch(() => {
															this.loading =
																false;
														});

													} else if (from == '4' ||
														from == '') {

														//关闭所有页面跳转至首页
														uni.reLaunch({
															url: "/pages/index/index"
														});
														this.loading = false;
													};
												} else {
													this.$utils.modal({
														title: '提示',
														content: retu.msg,
														showCancel: false,
														callback: (
															bool) => {
															this.loading =
																false;
														}
													});
												};
											}).catch(err => {
												this.loading = false;
											});

										},
										fail: () => {

											//Payment failed
											this.$utils.modal({
												title: '提示',
												content: '支付失败',
												showCancel: false,
												callback: (bool) => {

													this.loading = false;

												}
											});

										}
									});
								};
							} else {
								this.$utils.modal({
									title: '提示',
									content: res.msg,
									showCancel: false,
									callback: (bool) => {
										this.loading = false;
									}
								});

							};
						}).catch(() => {
							this.loading = false;
						});

					}
				});
			},
			

		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding-bottom: 220rpx;
	}

	.contents {
		padding-bottom: 0;
	}

	.time-wrap {
		padding: 0 24rpx 0 24rpx;
	}

	.time-wrap-group {
		position: relative;
		margin-bottom: 30rpx;
		display: flex;

	}

	.group-images {
		float: right;
		width: 62rpx;
		height: 62rpx;
	}

	.time-zhishi {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}

	.time-title {
		display: inline-block;
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
		margin-right: 10rpx;
	}

	.radio-groups {
		display: inline-block;
	}

	.time-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.time-item {
		position: relative;
		width: 24%;
		height: 120rpx;
		border: 2rpx solid #0DA297;
		box-sizing: border-box;
		border-radius: 10rpx;
		background: #fff;
		margin-bottom: 30rpx;
		margin-right: 1.3%;
	}

	.time-items {
		position: relative;
		width: 24%;
		height: 120rpx;
		border: 2rpx solid #FEA100;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		margin-right: 1.3%;
	}

	.time-items:nth-child(4n) {
		margin-right: 0;
	}

	.time-item:nth-child(4n) {
		margin-right: 0;
	}

	.item-image {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: -2rpx;
		top: -2rpx;
		vertical-align: middle;
	}

	.time-top {
		position: relative;
	}

	.time-top-tip {
		position: absolute;
		padding: 10rpx 20rpx 38rpx;
		top: -83rpx;
		left: -60rpx;
		width: 243rpx;
		text-align: center;
		font-size: 28rpx;
		color: #8878A5;
		background: url(https://imageapi.cd1a.cn/uni/charge/tip.png) no-repeat;
		background-size: 100% 100%;
	}

	.time-top-tips {
		position: absolute;
		padding: 10rpx 20rpx 38rpx;
		top: -83rpx;
		right: -60rpx;
		width: 243rpx;
		text-align: center;
		font-size: 28rpx;
		color: #8878A5;
		background: url(https://imageapi.cd1a.cn/uni/charge/tip.png) no-repeat;
		background-size: 100% 100%;
	}

	.item-images {
		width: 100%;
	}

	.time-text {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		text-align: center;
		color: #0DA297;
	}

	.time-texts {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		text-align: center;
		color: #FEA100;
	}

	.time-select {
		position: absolute;
		top: 0;
		right: 0;
		width: 68rpx;
		height: 68rpx;
	}

	.item-time {
		font-size: 34rpx;
		font-weight: 600;

	}

	.item-text {
		font-size: 22rpx;
		padding-top: 6rpx;
	}

	.time-item.current-time {
		background-color: #0DA297;
		color: #fff;
	}

	.currents-time {
		background-color: #FEA100;
		color: #fff;
	}

	.time-item.current-time .time-text {
		color: #fff;
	}

	.currents-time .time-texts {
		color: #fff;
	}

	.red-tips,
	.btn-tips {
		padding: 10rpx 24rpx 0;
		color: #ff0000;
		font-size: 24rpx;

	}

	.red-tips,
	.btn-tips-new {
		padding: 5rpx 24rpx 10rpx;
		color: #ff0000;
		font-size: 24rpx;

	}

	.gray-block {
		padding-bottom: 12rpx;
		background-color: #f4f4f4;
	}

	.balance-item-01 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 28rpx;
	}

	.balance-item-01>view:nth-child(1) {
		width: 190rpx;
	}

	.balance-item-01>view:nth-child(2) {
		flex: 1;
		text-align: right;
	}

	.balance-item-02 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 28rpx;
	}

	.picker-wrap {
		padding: 30rpx 0;
	}

	.common-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		line-height: 28rpx;
		padding: 30rpx 24rpx 60rpx;
	}

	.common-free {
		border-bottom: 2rpx solid #e5e5e5;
	}

	.balance {
		padding: 0 24rpx;
	}

	.coupon-have {
		border-bottom: 2rpx solid #e5e5e5;
	}

	.coupon-haves {
		display: block;
		margin: 0 auto;
		width: 94%;
		border-bottom: 2rpx solid #e5e5e5;
	}

	.common-item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e5e5e5;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.font-wei {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.current-coupon {
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
		vertical-align: middle;
	}

	.current-coupon-new {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: red;
		vertical-align: middle;
	}

	.balance-icon {
		vertical-align: middle;
	}

	.common-bottom>view:nth-child(1) {
		width: 140rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.common-bottom>view:nth-child(2) {
		flex: 1;
		text-align: right;
		line-height: 50rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #666;
		position: relative;
		top: -10rpx;

	}

	.btn-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
		padding-top: 0;
		width: 100%;
		background-color: #fff;
	}

	.btn {

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn-item {
		flex: 1;
	}

	.btn-item.full-stop {
		margin-right: 4rpx;
	}

	.btn-tips {
		color: #ff0000;
		font-size: 24rpx;
	}

	.slot-content {
		padding: 40rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 44rpx;
	}

	.buy {
		display: inline-block;
		height: 44rpx;
		width: 100rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #fff;
		background-color: #0DA297;
		text-align: center;
		border-radius: 22rpx;
	}

	.balance-cancel {
		display: inline-block;
		height: 44rpx;
		width: 80rpx;
		font-size: 22rpx;
		line-height: 42rpx;
		color: #0DA297;
		text-align: center;
		border-radius: 22rpx;
		border: 2rpx solid #0DA297;
		margin-left: 10rpx;
	}

	.card {
		padding: 0 24rpx;
	}

	.insurance-image {
		width: 25.4rpx;
		height: 28.4rpx;
		vertical-align: middle;
	}

	.insurance-image-02 {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-right: 14rpx;
	}

	.insurance-top-text1 {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 500;
		vertical-align: middle;
		padding: 0 14rpx;
	}

	.insurance-top-text2 {
		font-size: 24rpx;
		color: #A1DFD0;
		vertical-align: middle;

	}

	.insurance {
		padding: 24rpx;
	}

	.insurance-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.insurance-bottom {
		font-size: 22rpx;
		color: #666666;
		padding-top: 10rpx;
	}

	.tariff {
		padding: 40rpx;
	}

	.tariff-top {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding: 0 100rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;

	}

	.tariff-top>view {
		border-bottom: 2rpx solid #efefef;
		padding-bottom: 40rpx;
	}

	.tariff-bottom {
		text-align: center;
		font-size: 26rpx;
		color: #0da297;
	}

	.tariff-label {
		color: #0da297;
		font-size: 26rpx;
	}

	.tariff-center {
		padding-bottom: 40rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #333;
	}

	.tariff-time {
		padding-top: 12rpx;
	}

	//抽奖弹窗
	.prize-wrap {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 20;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.prize-top {
		text-align: center;
		padding-top: 160rpx;
	}

	.prize-top>image {
		width: 530rpx;
		height: 220rpx;
		vertical-align: middle;
	}

	.prize-bottom {
		width: 530rpx;
		margin: 0 auto;
	}

	.prize-center {
		position: relative;
		margin: 80rpx 0;
	}

	.prize-center-01 {
		width: 520rpx;
		height: 520rpx;
		display: block;
		margin: 0 auto;
	}

	.prize-center-02-transition {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 30;
		transform: translate(-50%, -50%);
		width: 430rpx;
		height: 430rpx;
	}

	.prize-center-02 {
		width: 430rpx;
		height: 430rpx;
		vertical-align: middle;
	}

	.prize-center-03 {
		width: 150rpx;
		height: 196rpx;
		position: absolute;
		left: 50%;
		top: 138rpx;
		transform: translateX(-50%);
		z-index: 40;
		vertical-align: middle;
	}

	.prize-center-04 {
		width: 600rpx;
		position: absolute;
		left: 50%;
		top: -116rpx;
		transform: translateX(-50%);
		z-index: 30;
	}

	.public-slot-content {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.public {
		width: 300px !important;
	}

	.public-txt {
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: red;
	}

	/* 气泡框 */
	.dialog-bubble {
		padding: 52rpx 48rpx;
		margin: 12rpx 18rpx;
		width: calc(100% - 36rpx);
		height: auto;
		background: #FFF;
		border-radius: 48rpx 48rpx 48rpx 12rpx;
		box-sizing: border-box;
		transform: scale(0.1);
		transform-origin: 0% 100% !important;
		-webkit-transform-origin: 0% 100% !important;
	}

	/* 充值弹窗 */
	.content-pay {
		padding-bottom: 90rpx;
	}

	.list-pay {
		padding: 0 1.66%;
	}

	.item {
		text-align: center;
		display: inline-block;
		/* overflow: hidden; */
		width: 30%;
		margin: 0 1.66%;
		padding: 24rpx 0;
		margin-bottom: 30rpx;
		border: 2rpx solid #0DA297;
		border-radius: 20rpx;
		color: #0DA297;
		font-size: 30rpx;
		position: relative;
	}

	.itemNew {
		text-align: center;
		display: inline-block;
		width: 30%;
		margin: 0 1.66%;
		padding: 24rpx 0;
		margin-bottom: 30rpx;
		border: 2rpx solid red;
		border-radius: 20rpx;
		color: red;
		font-size: 30rpx;
		position: relative;
	}

	.item.active,
	.item.active .money {
		background-color: #0DA297;
		color: #fff;
	}

	.title-pay {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		padding-bottom: 40rpx;
		color: #333333;
	}

	.power-pay {
		padding-bottom: 10rpx;
	}

	.power-pay text:nth-child(1) {
		font-size: 40rpx;
		font-weight: bold;
	}

	.power-pay text:nth-child(2) {
		font-size: 24rpx;
	}

	.moneyPay {
		font-size: 28rpx;
		color: #666666;
	}

	.moneyNew {
		font-size: 28rpx;
		color: red;
	}

	.moneyNews {
		font-size: 28rpx;
		color: #fff;
	}

	.btn-pay {
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: 24rpx;
	}

	.red-item-pay {
		border-color: red;
		color: red;
	}

	.red-item-pay .moneyPay {
		color: #fff;
	}

	.item.redactive {
		background-color: red !important;
		color: #fff !important;
		border-color: red !important;
	}

	.redactive .money {
		color: #fff !important;
		background-color: red !important;
	}

	.moneyNew {
		font-size: 28rpx;
		color: red;
	}

	.arrears-pay {
		color: #333;
		font-size: 32rpx;
		padding: 30rpx;
		padding-bottom: 0;
	}

	.forecast-title-pay {
		color: #333;
		font-size: 28rpx;
		padding: 65rpx 30rpx 20rpx;
		padding-bottom: 0;
	}

	.arrears-pay text:nth-child(2) {
		color: red;
	}

	.des-pay {
		padding: 30rpx;
		padding-bottom: 40rpx;
	}

	.des-title-pay {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
	}

	.des-content-pay {
		line-height: 40rpx;
		font-size: 26rpx;
	}

	.tips-pay {
		line-height: 44rpx;
		font-size: 26rpx;
		color: #e41818;
		padding: 20rpx 30rpx;

	}

	.balance-pay {
		padding-left: 8rpx;
		font-size: 26rpx;
		color: #d3a72b;
		font-weight: 600;
	}

	.rechargeable-pay {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
		background-color: red;
		position: absolute;
		right: -10rpx;
		top: -16rpx;
		color: #fff;
	}

	.public-button {
		margin: 20rpx auto;
		display: block;
		width: 50%;
		height: 80rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 25rpx;
		background-color: #0DA297;
	}

	.mask-show {
		position: relative;
	}

	.mask-shows {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.mask-showsTwo {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.top-tabs {
		width: 100%;
	}

	.Worry {
		overflow: hidden;
		margin: 0 auto;
		width: 702rpx;
		height: 200rpx;
		background: linear-gradient(90deg, #47C289 0%, #11B696 100%);
		box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(217, 217, 217, 0.4);
		border-radius: 8rpx;
	}

	.Worrys {
		padding: 5rpx 0 10rpx 22rpx;
		display: flex;
	}

	.Worry-left {
		flex: 1;
	}

	.Worry-right {
		margin-right: 22rpx;
		width: 270rpx;
	}

	.Worry-center {
		position: relative;
		margin: 0 auto;
		display: flex;
		width: 694rpx;
		height: 142rpx;
		background: #F3FDF8;
		box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(30, 171, 118, 0.4);
		border-radius: 8rpx;
	}

	.Worry-image {
		margin: 18rpx 15rpx 0 12rpx;
		width: 217rpx;
		height: 139rpx;
	}

	.Worry-text {
		flex: 1;
	}

	.Worry-text1 {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.Worry-text2 {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.Worry-top-text1 {
		font-size: 40rpx;
		font-weight: 500;
		color: #0DA297;
	}

	.Worry-top-text2 {
		font-size: 24rpx;
		font-weight: 500;
		color: #0DA297;
	}

	.Worry-top-text3 {
		color: #F24D4B;
	}

	.footer-button {
		margin: 10rpx auto;
		width: 100%;
		height: 88rpx;
	}

	.footer-loading {
		width: 100%;
		height: 88rpx;
		text-align: center;
		background: #F3FDF8;
		color: #11B696;
		line-height: 88rpx;
	}

	.footer-button-left {
		/* width: 276rpx;
		height: 100rpx;
		background: #F3FDF8;
		border-top: 2px solid #47C289;
		border-radius: 0rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: #11B696; */
	}

	.footer-button-lefts {
		/* flex: 1;
		height: 100rpx;
		background: linear-gradient(90deg, #47C289 0%, #11B696 100%);
		border-top: 2px solid #47C289;
		border-radius: 44rpx 0rpx 0rpx 44rpx;
		border-radius: 0rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF; */
	}

	.footer-button-right {
		flex: 1;
		height: 100rpx;
		background: linear-gradient(90deg, #47C289 0%, #11B696 100%);
		/* border-radius: 0rpx 44rpx 44rpx 0rpx; */
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}

	::v-deep .u-radio {
		line-height: 0 !important;
	}

	.money-card {
		margin: 20rpx auto;
		width: 702rpx;
		height: 322rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2px solid #FFF1ED;
	}

	.money-card-img1 {
		width: 702rpx;
		height: 322rpx;
	}
</style>